<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0707-JS作业-ajax天气预报-螺旋</title>
	<style type="text/css">
		html{font-family: "Microsoft YaHei";background-color: #666;}
		body,p,ul,h2{margin: 0;}
		ul{padding: 0;list-style: none;}
		i{font-style: normal;}
		a{text-decoration: none;}
		.clearfix:after{
			display: block;
			content: "";
			clear: both;
		}
		.wrap{
			width: 604px;
			height: 320px;
			margin: 50px auto;
			background-color: rgba(255,255,255,.8);
			border-radius: 10px;
		}
		header h2{
			float: left;
			height: 50px;
			padding-left: 15px;
			font-size: 20px;
			line-height: 50px;
		}
		header #city{
			float: left;
			width: 60px;
			height: 30px;
			margin: 10px;
			border: none;
			border-bottom: 1px solid #666;
			background-color: rgba(0,0,0,0);
			font-size: 20px;
			font-weight: 700;
			line-height: 30px;
			text-align: center;
		}
		.mainbox li{
			float: left;
			width: 110px;
			border-left: 1px solid rgba(255,255,255,.5);
			text-align: center;
		}
		.mainbox li img{
			width: 100px;
			height: 100px;
			margin-top: 20px;
		}
		.mainbox li:nth-child(1){
			width: 160px;
			border-left: none;
		}
		.mainbox li:nth-child(1) img{
			margin-top: 10px;
		}
		.now_box{
			width: 120px;
			margin: 0 auto 10px;
		}
		.now_box span{
			float: left;
		}
		.now_box .now_temp{
			width: 80px;
			font-size: 50px;
			line-height: 50px;
		}
		.now_box .sign,
		.now_box .now_weather{
			width: 40px;
			font-size: 16px;
			line-height: 25px;
			text-align: left;
			vertical-align: bottom;
		}
		.mainbox p{
			font-size: 14px;
			line-height: 25px;
		}
	</style>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
	<section class="wrap">
		<header class="clearfix">
			<h2><span></span> 周<span></span></h2>
			<input id="city" type="text" value="北京">
		</header>
		<ul class="mainbox clearfix">
			<li>
				<img src="" alt="天气">
				<div class="now_box clearfix">
					<span class="now_temp"></span>
					<span class="sign">℃</span>
					<span class="now_weather"></span>
				</div>
				<p class="temp"></p>
				<p class="weather"></p>
				<p class="wind"></p>
				<p class="air"></p>
			</li>
			<li>
				<p class="week"></p>
				<p class="date"></p>
				<img src="" alt="天气">
				<p class="temp"></p>
				<p class="weather"></p>
				<p class="wind"></p>
				<p class="air"></p>
			</li>
			<li>
				<p class="week"></p>
				<p class="date"></p>
				<img src="" alt="天气">
				<p class="temp"></p>
				<p class="weather"></p>
				<p class="wind"></p>
				<p class="air"></p>
			</li>
			<li>
				<p class="week"></p>
				<p class="date"></p>
				<img src="" alt="天气">
				<p class="temp"></p>
				<p class="weather"></p>
				<p class="wind"></p>
				<p class="air"></p>
			</li>
			<li>
				<p class="week"></p>
				<p class="date"></p>
				<img src="" alt="天气">
				<p class="temp"></p>
				<p class="weather"></p>
				<p class="wind"></p>
				<p class="air"></p>
			</li>
		</ul>
	</section>
</body>
<script>
	var oWarp = document.getElementsByClassName('wrap')[0],
		oCity = document.getElementById('city'),
		oH2 = oWarp.getElementsByTagName('h2')[0],
        oH2Sp = oH2.getElementsByTagName('span'),
		oMbox = oWarp.getElementsByTagName('ul')[0],
		oMboxLi = oMbox.getElementsByTagName('li'),
		oNbox = oWarp.getElementsByClassName('now_box')[0],
		oNtemp = oNbox.getElementsByTagName('span')[0],
        oNweather = oNbox.getElementsByTagName('span')[2],
		aWeek = ['一','二','三','四','五','六','日'];

    run(oCity.value);
    oCity.onblur = function(){
        run(oCity.value);//根据输入的城市名请求数据
    };
	   
    function run(city){
        $.ajax({
            type: 'post',
            url: 'http://route.showapi.com/9-2',
            dataType: 'json',
            data: {
                "showapi_timestamp": formatterDateTime(),
                "showapi_appid": '69241', //appid
                "showapi_sign": '02cd49492b984575b25abd6727780352',  //密钥secret
                "area":city,
                "needMoreDay":"1"
            },
            error: function(XmlHttpRequest, textStatus, errorThrown) {
                alert("操作失败!");
            },
            success: function(result) {
                console.log(result);
                var dtemp1 = result.showapi_res_body.f1.day_air_temperature,
                    ntemp1 = result.showapi_res_body.f1.night_air_temperature,
	                dweather1 = result.showapi_res_body.f1.day_weather,
                    nweather1 = result.showapi_res_body.f1.night_weather,
                    dwind1 = result.showapi_res_body.f1.day_wind_direction,
                    week1 = result.showapi_res_body.f1.weekday,
	                
                    dtemp2 = result.showapi_res_body.f2.day_air_temperature,
                    ntemp2 = result.showapi_res_body.f2.night_air_temperature,
                    dweather2 = result.showapi_res_body.f2.day_weather,
                    nweather2 = result.showapi_res_body.f2.night_weather,
                    dwind2 = result.showapi_res_body.f2.day_wind_direction,
                    week2 = result.showapi_res_body.f2.weekday,
	                date2 = result.showapi_res_body.f2.day,
	                
                    dtemp3 = result.showapi_res_body.f3.day_air_temperature,
                    ntemp3 = result.showapi_res_body.f3.night_air_temperature,
                    dweather3 = result.showapi_res_body.f3.day_weather,
                    nweather3 = result.showapi_res_body.f3.night_weather,
                    dwind3 = result.showapi_res_body.f3.day_wind_direction,
                    week3 = result.showapi_res_body.f3.weekday,
                    date3 = result.showapi_res_body.f3.day,
	                
                    dtemp4 = result.showapi_res_body.f4.day_air_temperature,
                    ntemp4 = result.showapi_res_body.f4.night_air_temperature,
                    dweather4 = result.showapi_res_body.f4.day_weather,
                    nweather4 = result.showapi_res_body.f4.night_weather,
                    dwind4 = result.showapi_res_body.f4.day_wind_direction,
                    week4 = result.showapi_res_body.f4.weekday,
                    date4 = result.showapi_res_body.f4.day,
	                
                    dtemp5 = result.showapi_res_body.f5.day_air_temperature,
                    ntemp5 = result.showapi_res_body.f5.night_air_temperature,
                    dweather5 = result.showapi_res_body.f5.day_weather,
                    nweather5 = result.showapi_res_body.f5.night_weather,
                    dwind5 = result.showapi_res_body.f5.day_wind_direction,
                    week5 = result.showapi_res_body.f5.weekday,
                    date5 = result.showapi_res_body.f5.day;

                oH2Sp[0].innerHTML = DateTime();//顶部日期
                oH2Sp[1].innerHTML = `${aWeek[week1-1]}`;//顶部星期
                oMboxLi[0].getElementsByTagName('img')[0].src = result.showapi_res_body.now.weather_pic;
                oNtemp.innerHTML = result.showapi_res_body.now.temperature;
                oNweather.innerHTML = result.showapi_res_body.now.weather;
	            oMboxLi[0].getElementsByClassName('temp')[0].innerHTML = `${ntemp1}~${dtemp1}℃`;
	            oMboxLi[0].getElementsByClassName('weather')[0].innerHTML = `${dweather1}转${nweather1}`;
	            oMboxLi[0].getElementsByClassName('wind')[0].innerHTML = `${dwind1}`;
	            
                oMboxLi[1].getElementsByClassName('week')[0].innerHTML = `周${aWeek[week2-1]}`;
                oMboxLi[1].getElementsByClassName('date')[0].innerHTML = date2;
                oMboxLi[1].getElementsByTagName('img')[0].src = result.showapi_res_body.f2.day_weather_pic;
                oMboxLi[1].getElementsByClassName('temp')[0].innerHTML = `${ntemp2}~${dtemp2}℃`;
                oMboxLi[1].getElementsByClassName('weather')[0].innerHTML = `${dweather2}转${nweather2}`;
                oMboxLi[1].getElementsByClassName('wind')[0].innerHTML = `${dwind2}`;

                oMboxLi[2].getElementsByClassName('week')[0].innerHTML = `周${aWeek[week3-1]}`;
                oMboxLi[2].getElementsByClassName('date')[0].innerHTML = date3;
                oMboxLi[2].getElementsByTagName('img')[0].src = result.showapi_res_body.f3.day_weather_pic;
                oMboxLi[2].getElementsByClassName('temp')[0].innerHTML = `${ntemp3}~${dtemp3}℃`;
                oMboxLi[2].getElementsByClassName('weather')[0].innerHTML = `${dweather3}转${nweather3}`;
                oMboxLi[2].getElementsByClassName('wind')[0].innerHTML = `${dwind3}`;

                oMboxLi[3].getElementsByClassName('week')[0].innerHTML = `周${aWeek[week4-1]}`;
                oMboxLi[3].getElementsByClassName('date')[0].innerHTML = date4;
                oMboxLi[3].getElementsByTagName('img')[0].src = result.showapi_res_body.f4.day_weather_pic;
                oMboxLi[3].getElementsByClassName('temp')[0].innerHTML = `${ntemp4}~${dtemp4}℃`;
                oMboxLi[3].getElementsByClassName('weather')[0].innerHTML = `${dweather4}转${nweather4}`;
                oMboxLi[3].getElementsByClassName('wind')[0].innerHTML = `${dwind4}`;

                oMboxLi[4].getElementsByClassName('week')[0].innerHTML = `周${aWeek[week5-1]}`;
                oMboxLi[4].getElementsByClassName('date')[0].innerHTML = date5;
                oMboxLi[4].getElementsByTagName('img')[0].src = result.showapi_res_body.f5.day_weather_pic;
                oMboxLi[4].getElementsByClassName('temp')[0].innerHTML = `${ntemp5}~${dtemp5}℃`;
                oMboxLi[4].getElementsByClassName('weather')[0].innerHTML = `${dweather5}转${nweather5}`;
                oMboxLi[4].getElementsByClassName('wind')[0].innerHTML = `${dwind5}`;
            }
        });
    }

    //时间函数
    function formatterDateTime(){
        var date = new Date();
        var month = date.getMonth() + 1;
        var datetime = date.getFullYear() + ""
            + (month >= 10 ? month : "0"+ month) + ""
            + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + ""
            + (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ""
            + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ""
            + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()) + "";
        return datetime;
    }
    function DateTime(){
        var date = new Date();
        var month = date.getMonth() + 1;
        var today = date.getFullYear() + "年" + month + "月" + date.getDate() + "日";
        return today;
    }

		
</script>
</html>